﻿/* Yarnball */
#yarnball {
display: inline-block;
margin-top: 0.8em;
}
.yarnball {
list-style: none;
margin: 0;
}
.yarnlet {
display: inline;
}
.yarnlet a,
.yarnlet a:link,
.yarnlet a:visited {
color: #666;
display: inline-block;
font-size: 12px;
margin-left: -13px;
padding: 7px 17px 11px 25px;
position: relative;
text-decoration: none;
}
.yarnlet.first a,
.yarnlet.first a:link,
.yarnlet.first a:visited {
padding-left: 8px;
}
body.ie7 .yarnlet.first a,
body.ie7 .yarnlet.first a:link,
body.ie7 .yarnlet.first a:visited {
padding-left: 17px;
}
.yarnlet a {
background-image: url(images/hc_yarnlett_global.png);
background-repeat: no-repeat;
background-position: 100% 0;
}
.yarnlet:hover a {
background-position: 100% -48px;
color: #333;
}
.yarnlet:active a {
background-position: 100% -96px;
color: #333;
}
.yarnlet .left-yarn {
background: url(images/hc_yarnlett_global.png) no-repeat;
margin-left: -17px;
padding: .7em 6px 11px 4px;
z-index: 11;
}
.yarnlet a:hover .left-yarn {
background-position: 0 -48px;
}
.yarnlet a:active .left-yarn {
background-position: 0 -96px;
}
/* IE fixes */
body.ie7 .yarnlet a:active, body.ie8 .yarnlet a:active {
background-position: 100% -96px;
}
#yarnball ul li {font-weight:bold;}
#yarnball ul li .past {color:#459E00;}
#yarnball ul li .current {color:#FF0084;background-position:100% -48px;}
#yarnball ul li .future {color:#DDDDDD;}